<template>
	<div class="moviegenre">
		<div class="dd">
			<div class="d1">
				<div class="d2">
					<p class="p1">书籍管理</p>
					—
					<p>书籍类型</p>
				</div>
				<div class="im">
					<el-button icon="el-icon-refresh-right"></el-button>
				</div>
			</div>
			<div class="hr"></div>
			<div class="d3" @click="add()">
				<el-button type="primary" size="mini">添加书籍类型</el-button>
			</div>
			<el-table :data="Alllist" class="d4" border @row-click="goupdate">
				<el-table-column prop="id" label="1级类型ID"></el-table-column>
				<el-table-column prop="prio" label="顺序"></el-table-column>
				<el-table-column prop="name" label="1级类型名称"></el-table-column>
				<el-table-column label="修改">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="goupdate(scope.row)"></el-button>
					</template>
				</el-table-column>
				<el-table-column label="二级节点信息" min-width="300">
					<template slot-scope="scope">
						<div class="box2">
							<div class="box2item" v-for="x2 in scope.row.children"> {{x2.name}}</div>
						</div>
					</template>
				</el-table-column>

			</el-table>
			<el-dialog title="类型信息" :visible.sync="x">
				<el-form :model="typeForm" label-width="80px" label-position="left">
					<el-form-item label="一级ID">
						<el-input v-model="typeForm.id" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="一级类型名称">
						<el-input v-model="typeForm.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="顺序">
						<el-input v-model="typeForm.prio" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="update">修改</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Moviegenre',
		data() {
			return {
				Alllist: [],
				x: false,
				typeForm: {
					id: '',
					name: '',
					prio: '',
				},
			}
		},
		methods: {
			add() {
				this.x = true
				this.typeForm = {
					id: 0,
					name: "",
					pid: 0,
					prio: 100,
				};
				this.title = "添加";
			},
			goupdate(row) {
				this.x = true;
				this.$get("/api/adm/type/findById/" + row.id).then((resp) => {
					this.typeForm = resp.data.data;
				});
			},
			update() {
				this.x = false;
				this.$postf("/api/adm/type/add", this.typeForm).then((resp) => {
					this.getAllType()
				})
			},
			getAllType() {
				this.$get("/api/adm/type/findAll2").then((res) => {
					if (res.status == 200) {
						console.log(res.data.data);
						var Alllist = res.data.data;
						console.log(Alllist);
						var news = [];
						//先给假设所有的类型都是第一层，都添加一个children的数组
						Alllist.forEach((type) => {
							//type.children = [];//给每个类型都添加一个children的数组
							news[type.id] = {
								...type,
								children: []
							};
						});
						const newtypes = [];
						Alllist.forEach((type) => {
							if (type.pid == 0) {
								//newtypes.push(type);
								newtypes.push(news[type.id]);
							} else {
								var parent = news[type.pid]; //先拿父类型
								console.log('pid : ');
								console.log(parent);
								if (parent) {
									parent.children.push(news[type.id]); //拿到子类型
								}
								console.log('添加完后 : ');
								console.log(parent);
							}
						});
						console.log(newtypes);
						this.Alllist = newtypes;
						this.Alllist.sort((a, b) => a.prio - b.prio);
						this.Alllist.forEach((item) => {
							item.children.sort((a, b) => a.prio - b.prio);
						})
					}
				})
			}
		},
		mounted() {

			this.getAllType();
		},
	}
</script>

<style scoped>
	.moviegenre {
		width: 85%;
	}

	.hr {
		margin-top: 1%;
		border: 1px solid #f4f4f4;
	}

	.dd {
		width: 95%;
		margin-left: 5%;
	}

	.d1 {
		display: flex;
		justify-content: space-between;
		margin-top: 2%;
	}

	.d1 .p1 {
		color: #a7adb2;
	}

	.d1 .im .el-button {
		background-color: #2da99d;
		color: white;
		border-radius: 5px;
	}

	.d2 {
		width: 17%;
		display: flex;
		justify-content: space-between;
	}

	.d3 button {
		margin-top: 1%;
		width: 9%;
		height: 35px;
		background-color: #009688;
		color: white;
		border-radius: 5%;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.d4 {
		margin-top: 2%;

	}

	.d6 {
		width: 20%;
		display: flex;
		margin-top: 1%;
	}

	.d6 .el-button {
		background-color: #009688;
		color: white;
		margin-left: 5%;
	}
</style>
